<template>
  <div class="user">
    <el-card>
      <h3>考勤汇总</h3>
      <el-divider></el-divider>
      <div class="userbutton">
        <!-- 导出excel -->
        <template>
          <download-excel
            :data="userList"
            :fields="json_fields"
            :header="title"
            name="用户信息表.xls"
          >
            <el-button type="success">导出</el-button>
          </download-excel>
        </template>
      </div>
      <div class="table">
        <el-table
          ref="multipleTable"
          :data="userList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            align="center"
            label="序号"
            width="100"
            type="index"
            fixed
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="100"
            align="center"
            fixed
          >
          </el-table-column>
          <el-table-column
            prop="bumen"
            label="部门"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="tel"
            label="手机号"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="jobNum"
            label="工号"
            width="130"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="idNum"
            label="证件号"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="yingday"
            label="应出勤天数"
            width="110"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="yinhour"
            label="应出勤小时数"
            width="110"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="shiday"
            label="实际出勤天数"
            width="110"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="shihour"
            label="实际出勤小时数"
            width="120"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="Absenteeism"
            label="矿工天数"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="addWord"
            label="工作日加班(小时)"
            width="130"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="addWeek"
            label="休息日加班(小时)"
            width="130"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="jiejiaday"
            label="节假日加班(小时)"
            width="130"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="shijian"
            label="病假时长"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="shijian"
            label="事假时长"
            width="100"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="reduceCard"
            label="缺卡次数"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="lazyOnce"
            label="迟到次数"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="zaotui"
            label="早退次数"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="lazyTime"
            label="延迟时长(分钟)"
            width="120"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="zaotuiTime"
            label="早退时长(分钟)"
            width="120"
            align="center"
          >
          </el-table-column>
        </el-table>

        <div class="page">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.currentIndex"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      yaoqiu: false,
      data: [],
      dialogVisible: false, // 确定上传
      queryInfo: {
        pageSize: 5,
        currentIndex: 1,
      },
      total: 0,
      title: "用户信息表",
      json_fields: {
        // 序号: "index",
        姓名: "name",
        账号: "account",
        部门: "stationId.name",
        岗位: "organId.name",
        手机号: "phone",
        邮件: "email",
        角色: "role_id.name",
        // 状态: "complete",
      },

      userList: [],
    };
  },
  created() {},
  mounted() {
    // 用户
    this.getUserList();
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(res) {
      if (res.code == 200) {
        this.data = res.arr;
        this.yes_upload();
      }
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onSubmit() {
      console.log("submit!");
    },
    async yes_upload() {
      let {
        data: { code },
      } = await this.$axios.post("empadds", this.data);
      if (code == 200) {
        this.$router.replace({ name: "emp" });
        this.$message({
          message: "上传成功",
          type: "success",
        });
      }
    },
    // 获取用户数据
    async getUserList() {
      const { data } = await this.$axios.get("/getkaoqin", {
        params: this.queryInfo,
      });
      if (data.code != 200) {
        return this.$message.error("用户列表获取失败");
      }
      console.log(data.data, "55555555");
      this.userList = data.data;
      this.total = data.total;
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getUserList();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.currentIndex = newPage;
      this.getUserList();
    },
  },
};
</script>

<style scoped>
.user {
  width: 100%;
  height: 100%;
}
.user .userbutton button {
  font-size: 10px;
}
.user .table {
  margin-top: 15px;
}
.user .userbutton {
  display: flex;
}
.user .userbutton button {
  margin: 10px;
}
.user .page {
  margin-top: 20px;
  margin-left: 450px;
}
</style>
